import React, { useState } from 'react'

/**
 * 【数据驱动视图】
 * 函数式组件什么时候调用？
 * 1、一上来会调用，拿着初始值，进行初次渲染
 * 2、当模型反生改变之后，会再次调用函数，进行再次渲染
 */
export default function UseStateDemo () {
  console.log('---UseStateDemo---')
  // 参数是模型的初始值
  // 返回值是一个数组，该数组一般解构之后使用，解构出来的第一个值是模型值，第二个值是更改模型值的函数
  // 一般该函数叫做 set模型名首字母大写
  const [count, setCount] = useState(100)

  // hook中实现双向数据绑定
  const [name, setName] = useState('小丽')

  const changeName = e => {
    setName(e.target.value)
  }

  return (
    <div>
      UseStateDemo
      <p>count is {count}</p>
      <p>
        <button onClick={() => setCount(count + 1)}>+1</button>
      </p>
      <p>
        <span>name is {name}</span>&nbsp;&nbsp;&nbsp;
        <input type='text' value={name} onChange={changeName} />
      </p>
    </div>
  )
}
